<template>
  <div>
    <div id="myChart" :style="{width: '1920px', height: '1080px'}"></div>
  </div>
</template>

<script>
export default {
  name: "EchartViews",
  data() {
    return {
      geoCoordMap:{
          苍梧县:[111.544008,23.845097]
      }
    }
  },
  created() {
  },
  mounted() {
    this.drawEchart()
  },
  methods: {
    drawEchart(){
      let elementById = document.getElementById('myChart');
      let myChart2 = this.$echarts.init(elementById)
      this.$echarts.registerMap("wuzhou",{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"shape":"Polygon","name":"西江","center":[111.297738,23.470805],"category":"default"},"geometry":{"type":"Polygon","coordinates":[[[111.169307,23.427969],[111.171024,23.419778],[111.201243,23.414737],[111.230775,23.422613],[111.247602,23.428914],[111.259278,23.442144],[111.268206,23.460727],[111.286406,23.465766],[111.310444,23.464506],[111.327614,23.46734],[111.330018,23.473954],[111.315595,23.473324],[111.297738,23.470805],[111.284002,23.472064],[111.268893,23.473324],[111.247259,23.472379],[111.236957,23.465136],[111.230432,23.454113],[111.221504,23.444979],[111.211202,23.439624],[111.202273,23.437734],[111.191284,23.432379],[111.176518,23.427654],[111.169307,23.427969]]]}}]})
      let option = {
        xAxis:{
          position:'top'
        },
        geo: {
          map: 'wuzhou',
          aspectScale: 0.85, //长宽比
          zoom: 1,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#262C42',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 2,
              borderColor:'#27BEF9',
            },
            emphasis: {
              borderWidth: 2,
              borderColor:'#27BEF9',
              color: 'green',
              label: {
                show: false
              }
            }
          }
        },
        serial:[{
          type: 'map',
          roam: true,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#2ab8ff',
              borderWidth: 1.5,
              areaColor: '#125c3c'
            },
            emphasis: {
              areaColor: '#38b429',
              borderWidth: 0,
              color: 'green'
            }
          },
          zoom: 1.1,
          map: 'wuzhou' //使用
          // data: this.difficultData //热力图数据   不同区域 不同的底色
        }]
      };
      myChart2.setOption(option)

    }
  }
}
</script>

<style lang="scss">
</style>